import React, { memo } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { COLORS } from '../styles/constants';

/**
 * AttractionCard 列表卡片
 * - 展示缩略图、名称、地址、评分/距离徽标
 * - onPress: 点击卡片回调
 */
const PLACEHOLDER_IMAGE =
  'https://dimg04.c-ctrip.com/images/0105l12000apah79p1B66.jpg';

const AttractionCard = memo(({ item, onPress }) => {
  const badges = [];
  if (item.level) {
    badges.push({ key: 'level', text: item.level, style: styles.level });
  }
  if (item.type) {
    badges.push({ key: 'type', text: item.type });
  }
  if (item.rating) {
    badges.push({
      key: 'rating',
      text: `⭐ ${item.rating}`,
      style: styles.rating,
    });
  }
  if (item.distance) {
    badges.push({ key: 'distance', text: item.distance });
  }

  return (
    <TouchableOpacity style={styles.card} onPress={onPress}>
      <Image
        source={{ uri: item.image || PLACEHOLDER_IMAGE }}
        style={styles.thumb}
        resizeMode="cover"
        progressiveRenderingEnabled
      />
      <View style={styles.body}>
        <Text style={styles.title} numberOfLines={1}>
          {item.name}
        </Text>
        {item.address ? (
          <Text style={styles.addr} numberOfLines={2}>
            {item.address}
          </Text>
        ) : null}
        {badges.length > 0 && (
          <View style={styles.metaRow}>
            {badges.map(({ key, text, style }) => (
              <View key={key} style={[styles.badge, style]}>
                <Text style={styles.badgeText}>{text}</Text>
              </View>
            ))}
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
});

export default AttractionCard;

const styles = StyleSheet.create({
  card: {
    marginHorizontal: 16,
    marginVertical: 8,
    padding: 12,
    backgroundColor: COLORS.white,
    borderRadius: 12,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: COLORS.shadow,
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    elevation: 2,
  },
  thumb: {
    width: 56,
    height: 56,
    borderRadius: 8,
    marginRight: 12,
    backgroundColor: COLORS.background.tertiary,
  },
  body: { flex: 1 },
  title: { fontSize: 16, color: COLORS.text.primary, fontWeight: '600' },
  addr: { marginTop: 2, fontSize: 12, color: COLORS.text.tertiary },
  metaRow: { marginTop: 8, flexDirection: 'row', gap: 8 },
  badge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    backgroundColor: COLORS.background.secondary,
    borderRadius: 999,
  },
  rating: { backgroundColor: COLORS.primaryLight },
  level: { backgroundColor: COLORS.primarySoft },
  badgeText: { fontSize: 12, color: COLORS.text.secondary },
});
